<template>
    <div ref="topDiv" class="page" v-if="showRouterView"> 
        <p class="artical_title">{{articalInfo.title}}</p>
        <p class="artical_info">{{articalInfo.browse}}次浏览 | 发布时间：{{articalInfo.createDate}} | 发布人：{{articalInfo.createUserName}}</p>
        <div style="margin-top:10px" v-for="item in downloadUrls" >
            <iframe style="height:300px;width:100%" v-if='item' :src="item" ></iframe>
        </div>

        <div class="artical_content" v-html="articalInfo.content"></div> 
    </div>

</template>

<script>

import {Api} from '../../../api/index.js'
import { sessionStorage, cookie } from '../../../common/cacheUtils.js';
 
export default {

     data() {
         return {
             showRouterView: true,
             imgs:[],
             articalInfo:{},
             uploadList:[],
             downloadUrl:""
        }
    },
    mounted(){
        this.$refs.topDiv.style.height = (window.innerHeight - 20) + 'px';
        this.$http.post(Api.addSafeActivityBrowse + "/" + this.$route.query.id).then(res => {
            this.query(this.$route.query.id);
        })
        window.addEventListener('scroll', this.scrollToTop);
    },
    destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
    },
    methods:{
        query(id){
            this.$http.get(Api.safeActivityMonth+"/"+id).then(res => {
                this.articalInfo = res.data.data;
                this.articalInfo.createDate = this.formatDate(new Date(this.articalInfo.createDate), 'yyyy-MM-dd');
                this.downloadUrls = [];
                if(this.articalInfo.videoFileName!=null&&this.articalInfo.videoPath!=null){
                    let names = this.articalInfo.videoFileName.split("@")
                    let paths = this.articalInfo.videoPath.split("@")
                    for(var i=0;i<names.length-1;i++){
                        this.uploadList.push({
                            videoFileName:names[i],
                            videoPath:paths[i]
                        })
                        this.downloadUrls.push(Api.courseVideoDownLoadUrl + paths[i]);
                    }
                }
            }).catch(e => {
                this.$Message.error("数据获取失败")
            });
        },
        // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop () {
            const that = this
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                if (that.scrollTop === 0) {
                clearInterval(timer)
                }
            }, 16)
        },
        
        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop () {
            const that = this
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrollTop = scrollTop
            if (that.scrollTop > 60) {
            that.btnFlag = true
            } else {
            that.btnFlag = false
            }
        },
        formatDate(date, fmt) {
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            let o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                'h+': date.getHours(),
                'm+': date.getMinutes(),
                's+': date.getSeconds()
            };
            for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + '';
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                }
            }
            return fmt;
        },
        padLeftZero(str) {
            return ('00' + str).substr(str.length);
        },
    }
}

</script>


<style scoped>

.page{
    background-color:#fff;
    min-width:1250px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.artical_title{
    margin-top:58px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 38px;
}

.artical_info{
    margin-top:25px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
    line-height: 38px;
}

.artical_img{
    margin-top:54px;
    width:500px;
    height:312px;
}

.artical_content{
    width:1100px;
    text-indent:25px;
    margin-top:45px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 38px;
}

.video-player-box{
    width: 1200px;
    height:100%;
    background: #BEBEBE;
}

.page_two{
    width:1200px;
    height:80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_two_left{
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    height:75px;
    line-height: 75px;
}

.page_two_right{
    display: flex;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
}

.page_two_right_left_child{
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #757575;
}

.page_two_right>>> .ivu-breadcrumb>span:last-child{
    font-weight: 400;
    color: #757575;
}

.page_two_right_child{
    margin-left:1000px;
    width: 67px;
    height: 24px;  
    border: 1px solid #F44336;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_two_right_child_icon{ 
    color: #D80200;
}

.page_two_right_child_label{ 
    margin-left:10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #D80200;
}

.page_three{
    display: flex;
    align-items: center;
    margin-bottom:23px;
    margin-top:25px;
}

.page_three_line{
    width: 5px;
    height: 20px;
    background: #D80200;
    border-radius: 3px;
}

.page_three_label{
    width:1185px;
    margin-left:10px;

    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
}

.page_four{
    width:1200px;
    display: flex;
    justify-content: space-between;
}

.page_four_single{
    height:178px;
    width:224px;
    display: flex;
    flex-direction: column;
}

.page_four_img{
    width: 224px;
    height: 140px;
    background: #BDBDBE;
    border-radius: 4px;
}

.page_four_text{
    width: 220px;
    font-size: 14px;
    line-height: 38px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    text-overflow:ellipsis;
    white-space:nowrap; 
    overflow:hidden;
}


.down_info{
    display: flex;
    flex-direction: column;
    height: 200px;
}

.down_red_line_4{
    margin-top:48px;
    width:1200px;
    height: 4px;
    color:white;
    background-color: red;
}

.down_red_line_1{
    margin-top:3px;
    width:1200px;
    height: 1px;
    color:white;
    background-color: red;
}

.down_company_info{
    margin: 24px;
    width: 1200px;
    height: 24px;
    text-align: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ADADAD;
    line-height: 24px;
}

.thumbStatus{
    background-color:red;
    color:red;
}

.thumbContentStatus{
    color:#fff;
}
</style>
